box-shadow: inset 1px 1px transparentize(black, 0.9),
$widget_edge;
&.highlight {
+ @include progressbar_fill;
border-color: $selected_borders_color;
- background-color: $selected_bg_color;
box-shadow: $widget_edge;
+ &.vertical { @include progressbar_fill(vertical); }
&:backdrop {
border-color: if($variant=='light', $selected_bg_color,
$selected_borders_color);
box-shadow: none;
}
}
- &:insensitive, &.hilight:insensitive {
+ &:insensitive, &.vertical:insensitive {
border-color: $insensitive_borders_color;
+ background-image: none;
background-color: $insensitive_bg_color;
box-shadow: $widget_edge;
}
// moving bit
.progressbar {
+ @include progressbar_fill;
border-width: 1px;
border-style: solid;
border-radius: 1.5px;
border-color: $selected_borders_color;
- background-color: $selected_bg_color;
- background-image: linear-gradient(to bottom, $selected_bg_color 2px,
- lighten($selected_bg_color,6%));
box-shadow: none; //needed for clipping
&.left {
border-top-left-radius: 3px;
box-shadow: none;
}
&.vertical {
- background-image: linear-gradient(to right, $selected_bg_color 2px,
- lighten($selected_bg_color,7%));
+ @include progressbar_fill(vertical);
&.bottom {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
@else { box-shadow: none; }
}
+
+@mixin progressbar_fill($d:horizontal) {
+ $dir: if($d==vertical,right,bottom);
+ background-image: linear-gradient(to $dir, $selected_bg_color 2px,
+ lighten($selected_bg_color,6%));
+}
.scale.trough.highlight,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
+ background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
border-color: #0f2b48;
- background-color: #215d9c;
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+ .scale.trough.highlight.vertical,
+ .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight.vertical,
+ .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight.vertical {
+ background-image: linear-gradient(to right, #215d9c 2px, #266cb5); }
.scale.trough.highlight:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
border-color: #0f2b48;
background-color: #215d9c;
box-shadow: none; }
- .scale.trough:insensitive, .scale.trough.hilight:insensitive,
+ .scale.trough:insensitive, .scale.trough.vertical:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
- .scale.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive,
+ .scale.scale-has-marks-above.scale-has-marks-below.trough.vertical:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
- .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive {
+ .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical:insensitive {
border-color: #1c1f1f;
+ background-image: none;
background-color: #323636;
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
.scale.trough:backdrop,
color: #5d6767; }
.progressbar {
+ background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
border-width: 1px;
border-style: solid;
border-radius: 1.5px;
border-color: #0f2b48;
- background-color: #215d9c;
- background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
box-shadow: none; }
.progressbar.left {
border-top-left-radius: 3px;
.progressbar.left.right {
box-shadow: none; }
.progressbar.vertical {
- background-image: linear-gradient(to right, #215d9c 2px, #276fba); }
+ background-image: linear-gradient(to right, #215d9c 2px, #266cb5); }
.progressbar.vertical.bottom {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
.scale.trough.highlight,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
+ background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
border-color: #184472;
- background-color: #4a90d9;
box-shadow: 0 1px white; }
+ .scale.trough.highlight.vertical,
+ .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight.vertical,
+ .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight.vertical {
+ background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); }
.scale.trough.highlight:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
border-color: #4a90d9;
background-color: #4a90d9;
box-shadow: none; }
- .scale.trough:insensitive, .scale.trough.hilight:insensitive,
+ .scale.trough:insensitive, .scale.trough.vertical:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
- .scale.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive,
+ .scale.scale-has-marks-above.scale-has-marks-below.trough.vertical:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
- .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive {
+ .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.vertical:insensitive {
border-color: #a1a1a1;
+ background-image: none;
background-color: #f4f4f4;
box-shadow: 0 1px white; }
.scale.trough:backdrop,
color: #c7c7c7; }
.progressbar {
+ background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
border-width: 1px;
border-style: solid;
border-radius: 1.5px;
border-color: #184472;
- background-color: #4a90d9;
- background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
box-shadow: none; }
.progressbar.left {
border-top-left-radius: 3px;
.progressbar.left.right {
box-shadow: none; }
.progressbar.vertical {
- background-image: linear-gradient(to right, #4a90d9 2px, #68a2df); }
+ background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); }
.progressbar.vertical.bottom {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;